<template>
  <table class="tbale table-bordered" style="text-align: center">
    <tr>
      <td colspan="2" >
        <h1>注册页面</h1>
      </td>
    </tr>
    <tr>
      <td>会员名称:</td>
      <td>
        <input type="text" v-model="info.username"  placeholder="请输入会员名称"/>
      </td>
    </tr>
    <tr>
      <td>会员密码:</td>
      <td>
        <input type="password" v-model="info.password"  placeholder="请输入会员密码"/>
      </td>
    </tr>
   
    <tr>
      <td colspan="2" style="text-align: center">
        <input type="button" value="注册" @click="enroll"  class="btn btn-success"/>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
// 引入ref
import { ref } from "vue";
// 引入axios
import axios from "axios";

const info = ref({
  username: "",
  password: "",
});

// 注册事件
const enroll = () => {
  axios
    .post("https://localhost:7071/api/Member/MemberRegister", {
      // ML_Name:从API创建的实体类中获取的属性名
      ML_Name: info.value.username,
      // ML_Pwd:从API创建的实体类中获取的属性名
      ML_Pwd: info.value.password,
    })
    .then((res) => {
      if (res.data > 0) {
        alert("注册成功");
      } else if (res.data == -1) {
        alert("用户名已存在");
      } else {
        alert("注册失败");
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<style scoped>
</style>